<template>
  <div class="cover-box">
    <template v-if="imgs.length">
      <div v-if="!opt.one">
      <el-image
        v-for="(src,index) in imgs"
        :key="index"
        class="cover"
        :style="style"
        :src="src"
        fit="contain"
        :previewSrcList="imgs"
        @click="onClickImg(index,src)"
      >

      </el-image>
      </div>
      <div v-else>
        <el-image
        class="cover"
        :style="style"
        :src="imgs[0]"
        fit="contain"
        :previewSrcList="imgs"
        @click="onClickImg(index,src)"
      >

      </el-image>
      <div v-if="imgs.length>1" style="text-align:center">还有{{imgs.length-1}}张</div>
      </div>
    </template>
    <template v-else>
      <div class="tip">暂无图片</div>
    </template>
  </div>
</template>

<script>
import tableColumnMixin from './table-column-mixin'

export default {
  name: 'ImageEl',
  mixins: [tableColumnMixin],
  filters: {},
  data() {
    return {
      opts: {
        size: 100,
        key: '',
        one: false
      }
    }
  },
  computed: {
    style() {
      let size = this.opt.size + 'px'
      return {
        maxHeight: size,
        maxWidth: size
      }
    },
    imgs() {
      var val2array = this.val2array
      var key = this.opt.key
      var list = []
      for (const item of val2array) {
        if (key && typeof item == 'object') {
          list.push(item[key])
        } else {
          list.push(item)
        }
      }
      return list
    }

  },
  methods: {
    onClickImg(index, src) {

    },
    onLoadError(e, index, src) {
      console.log('图片加载失败', e, index, src)
    }
  }
}
</script>

<style scoped lang="scss">
.cover-box {
  .cover {
  }

  .tip {
    color: #999;
  }
}
</style>
